Alteryx Analytics Cloud の App Builderを使って分析Webアプリを作ってみた！

matsuoka

2024.04.19

こんにちは、まつおかです。

Alteryx Analytics Cloudの製品について続々とブログが上がって来ていますが・・・

私は今回「App Builder」という機能を使って分析Webアプリを作ってみましたので、その手順をご紹介したいと思います。

Alteryx App Builderとは

Alteryx App BuilderはAlteryx Analytics Cloudに含まれており、ノーコードで分析Webアプリを簡単に構築することのできるツールです。

分析Webアプリ構築手順

今回はチョコレートの売上データを使用し、ラジオボタンで中カテゴリを選択すると、年代別の売上表とグラフを表示するWebアプリを作成します。

構築手順は以下となります。

Orchestrateキャンバスでデータフローを作成
Designキャンバスでレイアウトを作成
公開

Webアプリ作ってみた！

1. Orchestrateキャンバスでデータフローを作成

まず、Orchestrateキャンバスでアプリのデータフローを構築します。
データフローは Alteryx Designer Cloud 同様、左に表示されているツールパレットから対象のツールを配置し繋げて作成します。

アプリで使用するデータはcsv形式のデータを直接入力したり、Alteryx Analytics Cloudのデータセットを使用する他に、Alteryx Designer Cloudで作成したワークフローを連携することもできます。
今回は事前にAlteryx Designer Cloudで作成したワークフローを使用しました。

Designer Cloudを使ったワークフローの構築についてはこちらをご参照ください。

ワークフローを連携する場合は、左のツールパレットのIntegrationsにある「Workflow」をキャンバスにドラッグし、右の設定画面で接続するワークフローを選択します。

次に、Output Table Nameでワークフローの中のどのツールからの出力データを使用するか選択します。なんと、ワークフローの途中時点のデータを使用することもできるのです！

設定画面の「View Details」ボタンをクリックするとワークフローが表示されますので、ツール名の記憶が定かでなくてもここで確認することができ安心です。

今回は商品の売上データとマスタデータを結合・加工した上で、中カテゴリ、商品、年代でグループ化し売上を合計したデータを使用します。
App Builderに連携したデータは、Designer Cloud同様、下部の結果ウィンドウで確認することができます。

アプリでは中カテゴリを選択すると年代別の売上が表示されるという動きになりますので、まずは中カテゴリ、年代でグループ化し売上を合計する処理を追加します。App Builderではデータの加工をすることもできますので、データ連携時に表示するデータの状態に整形されていなくても問題ありません。

集計
集計にはツールパレットのLogicにある「Aggregate」を使用します。設定自体はDesigner Cloudの「Summarize」ツールやDesigner Desktopの「集計」ツールと同様です。

これでデータの加工ができましたので、次は中カテゴリをラジオボタンに表示し、選択されたデータのみにする処理を追加します。

対象のデータからラジオボタンとフィルタツールへの接続はこちらのようになります。

ラジオボタン
ツールパレットのInteractiveにある「Radio」をドラッグして接続します。

Label Sourceがラジオボタンに表示される文字列で、Value Sourceが実際のデータとして次のフィルタに渡されるデータです。今回はどちらも中カテゴリを使用しますので同じものを選択します。ラジオボタンのラベルとして表示するのは中カテゴリだけど、フィルタには対となるコードを渡したい場合Value Sourceはコードのフィールドを選択することになると思います。

フィルタ
ツールパレットのLogicにある「Filter」をドラッグし、Vと書いてある入力アンカーにRadioツールを、何も書いてない方の入力アンカーにAggregateツールを接続します。

「Set filter to」はValueを選択し、Columnは「中カテゴリ」、Operatorは「＝」を選択することで、中カテゴリがラジオボタンで選択された値と一致するという条件が設定できます。

ソート
あとはデータを年代別に並べ替えればデータの準備は完了です。
データの並べ替えにはツールパレットのLogicにある「Sort」をドラッグし接続します。

Columnは並べ替えるフィールド「年代」を選択、昇順にしますのでSort Directionは「ascending」を選択します。

データの準備が完了したので、最後にアプリに表示する表とグラフの設定をします。

表はツールパレットのDisplayにある「Table」、グラフは今回棒グラフを使いますので「Bar Chart」をSortツールに接続します。

表
TableツールはOrchestrate側で設定するものはありません。何を表示するかなどはDesign側の設定になります。

グラフ
Bar ChartツールはX軸、Y軸に表示するフィールドを選択します。今回はX軸に年代、Y軸に売上を設定しています。

これでOrchestrate側でのデータフローの作成は完了です！

2. Designキャンバスでレイアウトを作成

次にDesignキャンバスでレイアウトの設定をします。

まずは上部にBulding Blocksから「Heading」と「Paragraph」をドラッグで配置して設定画面のContentにアプリのタイトルと説明分を入力し、表やグラフとの間にスペースを設けるため「Spacer」を配置しました。青い斜線部分がSpacerですが、これがないと全部上に詰められてしまいます。。。